<template>
  <div class="godot-frame-container">
    <!-- 左侧面板 -->
    <div class="left-panel">
      <IframePanelList
        @component-loaded="handleComponentLoaded"
        @item-click="handleItemClick"
      />
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <!-- Tips按钮 -->
      <div class="tips-container">
        <el-tooltip content="排障流程提示" placement="bottom">
          <el-button class="tips-button" @click="showTipsDialog = true" circle>
            <el-icon><HelpFilled /></el-icon>
          </el-button>
        </el-tooltip>
      </div>

      <!-- 退出操作场景按钮 -->
      <!-- <div class="exit-button-container" v-if="showExitButton">
        <el-button type="danger" @click="exitPTCView"> 退出操作场景 </el-button>
      </div> -->

      <!-- iframe容器 -->
      <div class="iframe-container" v-if="!loadError">
        <iframe
          ref="godotFrame"
          :src="godotHtmlPath"
          width="100%"
          height="100%"
          frameborder="0"
          @load="onIframeLoad"
          @error="onIframeError"
          allow="fullscreen"
          allowfullscreen
        ></iframe>
      </div>

      <!-- 错误容器 -->
      <div class="error-container" v-if="loadError">
        <div class="error-message">
          <h2>连接失败</h2>
          <p>{{ errorMessage }}</p>
          <div class="error-tips">
            <h3>可能的解决方案：</h3>
            <ul>
              <li>检查网络连接是否正常</li>
              <li>检查WebSocket服务器是否运行</li>
              <li>刷新页面重试</li>
            </ul>
          </div>
          <div class="error-actions">
            <button class="retry-button" @click="reconnect">重试连接</button>
            <button class="refresh-button" @click="refreshPage">
              刷新页面
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- Tips弹窗组件 -->
    <TipsDialog v-model:visible="showTipsDialog" />

    <!-- 动态组件渲染区域 - 遮罩弹窗形式 -->
    <div class="modal-overlay" v-if="currentComponent" @click="closeModal">
      <div class="modal-content" @click.stop>
        <div class="modal-body">
          <component
            :is="currentComponent"
            @close="closeModal"
            @showExitOperate="showExitOperate"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, watch, computed } from "vue";
import { useRoute } from "vue-router";

// 导入Element Plus组件
import { ElTooltip, ElButton, ElDialog } from "element-plus";

// 导入Element Plus图标
import { HelpFilled } from "@element-plus/icons-vue";

// 导入控制面板组件
import IframePanelList from "@/components/iframe_panel/IframePanelList.vue";

// 导入TipsDialog组件
import TipsDialog from "@/components/pop_up/TipsDialog.vue";
import receiveMessage from "@/core/communication/FrontMessage";
import {
  ReceiveMessageType,
  SendMessageType,
} from "@/core/config/DeclareGlobal";
import sendToUnity from "@/core/communication/SendToUnity";

// Props
const props = defineProps({
  htmlPath: {
    type: String,
    default: null,
  },
});

// Emits
const emit = defineEmits([]);

// 响应式数据 - 弹窗相关
const currentComponent = ref(null);
const activeItem = ref(null);
const currentModalTitle = ref("");

// 响应式数据
const godotFrame = ref(null);
const isLoading = ref(true);
const loadError = ref(false);
const errorMessage = ref("故障模拟系统加载失败，请稍后再试。");
const godotHtmlPath = ref(props.htmlPath);
const showTipsDialog = ref(false);
const showExitButton = ref(false); // 控制退出按钮显示状态
const connectionStatusText = ref("正在连接...");
receiveMessage.addListener(ReceiveMessageType.Initialized, () => {
  connectionStatusText.value = "已连接";
  console.log("与unity已连接");
});

// 刷新页面
const refreshPage = () => {
  window.location.reload();
};

// 初始化连接
const initializeConnection = () => {};

// 处理组件加载完成事件
const handleComponentLoaded = ({ item, component, title }) => {
  activeItem.value = item.id;
  currentModalTitle.value = title;

  // 直接使用从子组件传递的component
  if (component) {
    currentComponent.value = component;
  }
};

// 处理面板项点击事件
const handleItemClick = (item) => {};

// 关闭弹窗方法
const closeModal = () => {
  currentComponent.value = null;
  activeItem.value = null;
  currentModalTitle.value = "";
};

// 显示退出按钮
const showExitOperate = () => {
  showExitButton.value = true;
  closeModal();
};

// 退出PTC查看
const exitPTCView = () => {
  sendToUnity.send({
    type: SendMessageType.ExitPTCView,
    data: {},
  });
  showExitButton.value = false; // 点击后隐藏按钮
};

// 便捷函数，使用iframeCommManager与Godot通信

// 暴露方法给父组件
defineExpose({
  initializeConnection,
  closeModal,
});

// 生命周期钩子
onMounted(() => {
  console.log("htmlPath:", godotHtmlPath.value);
  sendToUnity.init(godotFrame.value);
  // 初始化WebSocket连接
  initializeConnection();
});

onUnmounted(() => {});
</script>

<style scoped>
.godot-frame-container {
  height: 100%;
  width: 100%;
  position: relative;
}

.left-panel {
  border-radius: 12px;
  position: absolute;
  left: 0;
  top: 10%;
  background-color: rgba(245, 247, 250, 0.95);
  backdrop-filter: blur(5px);
  border-right: 1px solid #dcdfe6;
  overflow-y: auto;
  z-index: 100;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
}

.left-panel:hover {
  background-color: rgba(245, 247, 250, 1);
  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.2);
}

.main-content {
  height: 100%;
  width: 100%;
  position: relative;
}

.tips-container {
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
}

.exit-button-container {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 1000;
}

.tips-button {
  background-color: #409eff;
  border-color: #409eff;
}

.tips-button:hover {
  background-color: #66b1ff;
  border-color: #66b1ff;
}

.iframe-container {
  width: 100%;
  height: 100%;
  position: relative;
}

.iframe-container iframe {
  border: none;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.error-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
  padding: 20px;
}

.error-message {
  text-align: center;
  max-width: 500px;
  background: #fff;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  border: 1px solid #f0f0f0;
}

.error-message h2 {
  color: #f56c6c;
  margin-bottom: 15px;
  font-size: 24px;
}

.error-message p {
  color: #606266;
  margin-bottom: 20px;
  font-size: 16px;
  line-height: 1.5;
}

.error-tips {
  text-align: left;
  margin-bottom: 25px;
}

.error-tips h3 {
  color: #303133;
  margin-bottom: 10px;
  font-size: 18px;
}

.error-tips ul {
  list-style-type: none;
  padding: 0;
}

.error-tips li {
  color: #606266;
  margin-bottom: 8px;
  padding-left: 20px;
  position: relative;
  font-size: 14px;
}

.error-tips li::before {
  content: "•";
  color: #409eff;
  position: absolute;
  left: 0;
  font-weight: bold;
}

.error-actions {
  display: flex;
  gap: 15px;
  justify-content: center;
}

.retry-button,
.refresh-button {
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.retry-button {
  background-color: #409eff;
  color: white;
}

.retry-button:hover {
  background-color: #66b1ff;
}

.refresh-button {
  background-color: #67c23a;
  color: white;
}

.refresh-button:hover {
  background-color: #85ce61;
}

.loading-overlay {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 400px;
  background-color: #f8f9fa;
  border-radius: 8px;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #e4e7ed;
  border-top: 4px solid #409eff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 20px;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.loading-overlay p {
  color: #606266;
  font-size: 16px;
  margin: 0;
}

/* 弹窗相关样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  animation: fadeIn 0.3s ease-out;
}

/* 弹窗内容样式 */
.modal-content {
  background-color: white;
  border-radius: 12px;
  max-width: 800px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  animation: slideIn 0.3s ease-out;
}

/* 弹窗头部样式 */
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #e0e0e0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 12px 12px 0 0;
}

.modal-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

/* 关闭按钮样式 */
.close-button {
  color: white;
  font-size: 24px;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease;
}

.close-button:hover {
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
}

/* 弹窗主体样式 */
.modal-body {
  overflow-y: auto;
  flex: 1;
}

/* 动画效果 */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>